<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" size="1100px" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">{{ currentRow?.reportName }}</div>
			</div>
		</template>

		<template #default>
			<el-container class="zs-drawer-container zs-drawer-content-whole">
				<el-scrollbar class="zs-drawer-content">
					<div v-for="(item, index) in list" :key="item.reportDetailId">
						<div class="zs-align-center zs-space-bottom" :class="{ ' zs-space-top-lg': index != 0 }" :id="`drawer${index}`">
							<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
							<div class="zs-title">{{ item.reportDetailName }}</div>
						</div>
						<div class="zs-card zs-space-bottom">
							<remixTable ref="refTable" :isReadOnly="isReadOnly" :handleType="handleType" :currentRow="currentRow" :tableHeaderList="[99].includes(index) ? tableHeaderList1 : tableHeaderList2" :rowClassName="[99].includes(index) ? rowClassName1 : rowClassName2" :tableList="item.tableBody"></remixTable>
						</div>
					</div>
				</el-scrollbar>
				<hsDocWrapper :nodeList="curNodeList" />
			</el-container>
		</template>

		<template v-if="handleType != 'info'" #footer>
			<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">提交</el-button>
		</template>
	</el-drawer>
</template>

<script setup>
	import { getCommonDynamicTableDataApi } from '@/api/SpecialReport/settlementReport';
	import { ref, watch, nextTick } from 'vue';
	import { toThousands } from '@/utils/number-util';
	import remixTable from '../components/remixTable.vue';
	import { setOrder } from '@/utils/publicUtils';
	import { deepClone } from '@/utils/publicUtils';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
	});

	const emit = defineEmits(['close']);

	let isShowDrawer = ref(props.isShow);

	const curNodeList = ref([
		{ name: '内部委托', id: 'drawer0' },
		{ name: '轻拓A类', id: 'drawer1' },
		{ name: '轻拓B类', id: 'drawer2' },
		// { name: '轻拓C类', id: 'drawer4' },
		// { name: '自营珠宝', id: 'drawer5' },
		// { name: '自营美妆', id: 'drawer6' },
	]);

	let noFormatColNumList1 = '[0, 1]';
	let noFormatColNumList2 = '[0]';
	let tableHeaderList1 = ref([{ label: '序号', isTxt: true }, { label: '科目', isTxt: true }, { label: '预算' }, { label: '实际' }, { label: '完成率', unit: '%' }, { label: '实际比例', unit: '%' }, { label: '管控标准', unit: '%' }]);
	let tableHeaderList2 = ref([{ label: '科目', isTxt: true }, { label: '预算' }, { label: '实际' }, { label: '完成率', unit: '%' }, { label: '实际比例', unit: '%' }, { label: '管控标准', unit: '%' }]);
	setOrder(tableHeaderList1.value);
	setOrder(tableHeaderList2.value);

	watch(
		() => props.isShow,
		newVal => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				getInfo();
			});
		},
	);

	//数据源
	let list = ref([]);
	const getInfo = async () => {
		let itemList = [];
		let res = await getCommonDynamicTableDataApi(173);
		if (res.data.code != 200) return;

		itemList[0] = deepClone(res.data.data);
		itemList[0].reportDetailName = '1. 内部委托-结构化管控分析表';
		itemList[1] = deepClone(res.data.data);
		itemList[1].reportDetailName = '2. 轻拓-结构化管控分析表(A类-委托管理)';
		itemList[1].reportDetailId = 2;
		itemList[2] = deepClone(res.data.data);
		itemList[2].reportDetailName = '3. 轻拓-结构化管控分析表(B类-物业包干)';
		itemList[2].reportDetailId = 3;

		itemList.forEach((report, reportIndex) => {
			report.tableBody &&
				report.tableBody.forEach((row) => {
					row.forEach((col, colIndex) => {
						// 设置value
						let noFormatColNumList = [0, 4, 5].includes(reportIndex) ? noFormatColNumList1 : noFormatColNumList2;
						if (noFormatColNumList.includes(colIndex)) {
							col.isTxt = true;
						} else {
							col.value = col.value.replace(/,/g, '');
						}
						col.value = props.handleType == 'info' ? (!isNaN(col.value) && col.value != '-' && !col.isTxt ? toThousands(col.value) : col.value) : col.value;
					});
				});
		});
		list.value = itemList;
		console.log(list);
	};

	//提交
	const refTable = ref([]);
	const doConfirm = async () => {
		list.value.forEach((item, index) => {
			item.tableBody = refTable.value[index].getParams();
		});
	};

	//二级表格颜色
	const rowClassName1 = data => {
		if ([0, 1, 9, 10, 11].includes(data.rowIndex)) {
			return 'bg-color-eef4fe';
		}
		return '';
	};

	//三级表格颜色
	const rowClassName2 = data => {
		if ([0, 8, 9, 10].includes(data.rowIndex)) {
			return 'bg-color-eee2dd';
		} else if ([1, 5, 6, 7].includes(data.rowIndex)) {
			return 'bg-color-eef4fe';
		}
		return '';
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};
</script>

<style scoped lang="scss">
	.zs-drawer-content-whole {
		:deep(.report-table) {
			.bg-color-eee2dd {
				--el-table-tr-bg-color: #eee2dd !important;
			}
			.bg-color-eef4fe {
				--el-table-tr-bg-color: #eef4fe !important;
			}
			.el-input.is-disabled .el-input__wrapper {
				--el-table-tr-bg-color: transparent !important;
				background-color: transparent !important;
			}
			.el-input__wrapper {
				.el-input__inner {
					text-align: right !important;
					font-size: 14px;
				}
			}
			.no-shadow-input {
				.el-input__wrapper {
					box-shadow: none !important;
				}
			}
			.el-input-group__append {
				background-color: transparent !important;
				padding: 0 0 0 5px;
				box-shadow: none !important;
			}
		}
	}
	.overflow-auto {
		overflow-y: auto !important;
	}
</style>
